<template>
  <div class="max">
    <my-header :backBtn="true">
      <div slot="title">
        通讯录
      </div>
    </my-header>
    <div class="cont-nof tl">
      <div class="infoBox oh">
        <div class="info_avatar fl">
          <img class="info_avatar" :src="info.student.avatar">
        </div>
        <div class="info_txt fr flex">
          <div class="flex">
            <span style="width: 70%;">姓名：{{info.student.name}}</span>
            <span style="width: 30%;">性别：{{info.student.sex}}</span>
          </div>
          <div class="flex">
            <span style="width: 70%;">班级：{{info.student.clazzName}}</span>
            <span style="width: 30%;">年龄：{{info.student.age}}</span>
          </div>
          <div>
            IC卡号：{{info.student.icCard}}
          </div>
        </div>
      </div>
      <div class="cont_title">
        关联家长：
      </div>
      <div class="infoBox oh" v-for="(item,index) in info.kinsfolkList" :key="index">
        <div class="info_avatar fl">
          <img class="info_avatar" :src="item.avatar">
        </div>
        <div class="info_txt fr flex">
          <div class="flex">
            姓名：{{item.name}}
          </div>
          <div class="flex">
            关系：{{item.role}}
          </div>
          <div>
            联系电话：{{item.phone}}
						<a :href="'tel:' + item.phone">
							<img src="../../../static/img/phone.png" alt="">
						</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        info:{
          student: {},
          kinsfolkList: [],
        }
      }
    },
    methods: {
      getDetail() {
        this.$http.getKinsfolkList({studentId: this.student.id}).then(resp => {
          this.info = resp.data;
        })
      }
    },
    mounted() {
      this.student = this.$route.query;
      this.getDetail();
    }
  }
</script>

<style scoped>
  .infoBox {
    width: calc(100% - 20px);
    height: 11.6rem;
    background: #FFFFFF;
    margin: 1.5rem auto 0;
    padding: 1.6rem 1rem;
    border-radius: 6px;
    box-sizing: border-box;
  }

  .info_avatar {
    height: 8rem;
    width: 8rem;
    background: #E8E8E8;
  }

  .info_txt {
    width: calc(100% - 10rem);
    height: 100%;
    font-size: 1.4rem;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
  }

  .info_txt > div {
    width: 100%;
    height: 2.2rem;
    line-height: 2.2rem;
  }

  .info_txt > div > span {
    white-space: nowrap;
  }

  .info_txt img {
    height: 2rem;
    vertical-align: middle;
    margin-top: -0.4rem;
    margin-left: 1rem;
  }

  .cont_title {
    font-size: 1.6rem;
    width: calc(100% - 2rem);
    margin: 1.5rem auto;
  }
</style>
